<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h3>this.$toast()</h3>
    <ul>
      <li><a href="javascript:void(0)" @click="showSuccess()">success Message</a></li>
      <li><a href="javascript:void(0)" @click="showError()">error Message</a></li>
      <li><a href="javascript:void(0)" @click="showInfo()">Info Message</a></li>
    </ul>
    <h1>树形组件</h1>
    <VueTree class='align-center' />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import VueTree from '@/components/VueTree/VueTree.vue'
export default defineComponent({
  name: 'HelloWorld',
  components: { VueTree },
  props: {
    msg: String,
  },
  methods: {
    showSuccess() {
      // console.log('click success')
      // this.$toast({
      //   message: 'This is a success message2',
      //   type: 'success',
      //   duration: 5000,
      // })
      this.$toast.success('This is a success message')
    },
    showError() {
      // console.log('click error')
      // this.$toast({
      //   message: 'This is a error message',
      //   type: 'error',
      //   duration: 5000,
      // })
      this.$toast.error('This is an error message')
    },
    showInfo() {
      this.$toast({
        message: 'This is Info message',
        type: 'info',
        duration: 1000
      })
    }
  }
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}

.align-center {
  width: 300px;
  margin: 0 auto;
}
</style>
